// ###该样式文件的作用：tab-nav 导航内部 样式布局 - 所有的导航样式都在这里统一设置，方便管理

// ### 起类名 规范： 一般两种情况
// 1. 一个页面一个 tab 导航
// custom-[name]-tab-nav-text  name: 根据当前页面路由名称来定义，这样可以防止重复
// 列如：在个人中心页 （路由名称是 mine）此时这样定义类：.custom-mine-tab-nav-text

// 2. 一个页面 两个及以上的 tab 导航
// custom-[name]-[role]-tab-nav-text  name: 同上 role: 该 tab导航的作用
// 列如：在个人中心页 （路由名称是 mine）,有一个导航是分类导航，此时这样定义类：.custom-mine-classify-tab-nav-text

// 个人中心导航
.custom-mine-tab-nav-text {
  padding: 0px 8px;
  height: 24px;
  line-height: 24px;
  box-sizing: border-box;
  border-radius: 22px;
  background-color: #f5f5f5;
  color: #666666;
  &.active {
    color: var(--van-primary-color);
    background-color: #edfafa;
  }
}

// 个人中心分类导航
.custom-mine-classify-tab-nav-text {
  color: #666666;
  font-size: 18px;
  &.active {
    position: relative;
    font-size: 22px;
    color: #101010;
    font-weight: 600;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      height: 10px;
      background: linear-gradient(
        180deg,
        rgba(0, 191, 198, 0) 0%,
        rgba(0, 191, 198, 0.9) 100%
      );
    }
  }
}
